<template>
  <div class="person">
    <img :src="avatar" width="100px" />
    <span>{{ name }}</span>
    <i class="el-icon-circle-close" @click="doClick"></i>
  </div>
</template>

<script>
export default {
  props: {
    // 显示头像的路径
    avatar: {
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: "姓名",
    },
  },
  methods: {
    // 监听表示删除的图标被点击
    doClick() {
        // $emit('自定义事件名称') : 通知父组件 自定义事件被触发
        this.$emit('delete',{name:this.name})
    }
  },
};
</script>

<style lang="scss" scoped>
.person {
  margin: 5px;
  display: inline-block;
  width: 110px;
  padding: 5px;
  border: 1px solid #ccc;
  text-align: center;
  position: relative;
  &:hover i {
    display: block;
  }
  .el-icon-circle-close {
    background-color: white;
    font-size: 20px;
    position: absolute;
    right: -10px;
    top: -10px;
    display: none;
  }
}
</style>
